<template>
  <div>
    <head-top routerName="goodsManagement" title="商品管理"></head-top>
    <div class="content-wrap">
      <van-tabs @click="tabClick" v-model="active">
        <van-tab
          :title="item.label"
          v-for="(item, index) in nav"
          :name="item.status"
          :key="index"
        ></van-tab>
      </van-tabs>
      <div class="list">
        <van-pull-refresh
          v-model="refreshing"
          success-text="刷新成功"
          @refresh="onLoad"
        >
          <van-list v-model="loading" :finished="finished" @load="onLoad">
            <ul>
              <template v-for="(item, index) in list">
                <li
                  :key="index"
                  @click="edit({ noEdit: true, goodsId: item.goodsId })"
                  v-if="formatList(item.status)"
                >
                  <van-image fit="cover" :src="item.goodsUrl" />
                  <div class="info">
                    <div class="name">
                      {{ item.goodsDesc }}
                    </div>
                    <div class="price">
                      {{ item.amount | formatFront }}
                      <span class="decimal">{{
                        item.amount | formatAfter
                      }}</span
                      ><span class="company">元宝</span>
                    </div>
                    <div class="salesAndstock">
                      <span class="sales">销量50</span>
                      <span class="stock">库存{{ item.inventory }}</span>
                      <div class="state">{{ item.status | formatStatus }}</div>
                    </div>
                    <div class="footer">
                      <template v-if="item.status == '0'">
                        <div
                          class="button"
                          @click.stop="cancelGoodsStatus(item.goodsId)"
                        >
                          取消
                        </div>
                      </template>
                      <template v-if="item.status == '1'">
                        <div
                          class="button"
                          @click.stop="StoreGoodsStatus(item.goodsId)"
                        >
                          下架
                        </div>
                      </template>
                      <template v-else-if="item.status == '2'">
                        <div
                          class="button"
                          @click.stop="DeleteGoods(item.goodsId)"
                        >
                          删除
                        </div>
                        <div class="button" @click.stop="edit(item)">修改</div>
                      </template>
                      <template
                        v-else-if="item.status == '4' || item.status == '5'"
                      >
                        <div
                          class="button"
                          @click.stop="DeleteGoods(item.goodsId)"
                        >
                          删除
                        </div>
                        <div class="button" @click.stop="edit(item)">修改</div>
                      </template>
                    </div>
                  </div>
                </li>
              </template>
              <goods-null
                v-if="isListNull && !loading"
                describe="您还没有相关商品"
              ></goods-null>
            </ul>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
import {
  Tab,
  Tabs,
  Image as VanImage,
  Dialog,
  Toast,
  PullRefresh,
  List,
} from "vant";
import HeadTop from "@/components/head";
import goodsNull from "@/components/null/goodsNull";
import {
  storeGoods,
  deleteGoods,
  storeGoodsStatus,
} from "@/api/goodsManagement";
// 0审核中1销售中 2已下架3锁定 4未通过 5取消
const statusList = [
  {
    label: "审核中",
    status: "0",
  },
  {
    label: "销售中",
    status: "1",
  },
  {
    label: "已下架",
    status: "2",
  },
  {
    label: "已锁定",
    status: "3",
  },
  {
    label: "未通过",
    status: "4",
  },
  {
    label: "取消",
    status: "5",
  },
];
export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [VanImage.name]: VanImage,
    [Toast.name]: Toast,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,
    [Dialog.Component.name]: Dialog.Component,
    HeadTop,
    goodsNull,
  },
  data() {
    return {
      nav: [
        {
          label: "全部",
          status: "0,1,2,4,3,5",
        },
        {
          label: "未审核",
          status: "0",
        },
        {
          label: "未通过",
          status: "4,3,5",
        },
        {
          label: "销售中",
          status: "1",
        },
        {
          label: "已下架",
          status: "2",
        },
      ],
      list: [],
      status: "0,1,2,4,3,5",
      refreshing: false,
      loading: false,
      finished: false,
    };
  },
  filters: {
    formatDate(date) {
      var date = new Date(date);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
    formatFront(text) {
      return text.substring(0, text.indexOf("."));
    },
    formatAfter(text) {
      return text.substr(text.lastIndexOf("."));
    },
    formatStatus(statusId) {
      var status = statusList.find((item) => item.status === statusId);
      if (status) {
        return status.label;
      }
    },
  },
  computed: {
    formatList() {
      return function (status) {
        return this.status.split(",").indexOf(status) !== -1;
      };
    },
    isListNull() {
      return !this.list.some((item) =>
        this.status.split(",").some((ele) => ele === item.status)
      );
    },
  },
  methods: {
    tabClick(status) {
      this.status = status;
    },
    onLoad() {
      storeGoods({}).then((res) => {
        this.loading = false;
        this.refreshing = false;
        this.finished = true;
        this.list = res.data.resultData;
      });
    },
    edit(query) {
      this.$router.push({
        name: "goodsRelease",
        query,
      });
    },
    DeleteGoods(goodsId) {
      Dialog.confirm({
        title: "是否确定删除?",
      })
        .then(() => {
          const toast = Toast.loading({
            duration: 0,
            forbidClick: true,
            message: "删除中...",
          });
          deleteGoods({ goodsId }).then((res) => {
            if (res.data.resultStatus) {
              Toast.success(res.data.errorMessage);
              this.onLoad();
            } else {
              Toast.fail(res.data.errorMessage);
            }
            const timer = setInterval(() => {
              clearInterval(timer);
              Toast.clear();
            }, 1000);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    cancelGoodsStatus(goodsId) {
      Dialog.confirm({
        title: "是否确定取消",
      })
        .then(() => {
          const toast = Toast.loading({
            duration: 0,
            forbidClick: true,
            message: "取消中...",
          });
          const data = {
            goodsId: goodsId,
            statusId: "5",
          };
          storeGoodsStatus(data).then((res) => {
            if (res.data.resultStatus) {
              Toast.success(res.data.errorMessage);
              this.onLoad();
            } else {
              Toast.fail(res.data.errorMessage);
            }
            const timer = setInterval(() => {
              clearInterval(timer);
              Toast.clear();
            }, 1000);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    StoreGoodsStatus(goodsId) {
      Dialog.confirm({
        title: "是否确定下架",
      })
        .then(() => {
          const toast = Toast.loading({
            duration: 0,
            forbidClick: true,
            message: "下架中...",
          });
          const data = {
            goodsId: goodsId,
            statusId: "2",
          };
          storeGoodsStatus(data).then((res) => {
            if (res.data.resultStatus) {
              Toast.success(res.data.errorMessage);
              this.onLoad();
            } else {
              Toast.fail(res.data.errorMessage);
            }
            const timer = setInterval(() => {
              clearInterval(timer);
              Toast.clear();
            }, 1000);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>
<style lang="less" scoped>
.content-wrap {
  .van-pull-refresh {
    overflow: inherit;
    /deep/.van-pull-refresh__track {
      min-height: 70vh;
    }
  }
  /deep/.van-loading {
    margin: 0;
  }
  .van-tabs {
    z-index: 2;
    /deep/.van-tabs__nav {
      padding: 0;
      .van-tab {
        padding: 0;
        .van-tab__text {
          font-size: 12px;
          font-weight: 400;
          color: #333333;
        }
        &.van-tab--active {
          span {
            font-weight: bold;
          }
        }
      }
      .van-tabs__line {
        bottom: 8px;
        height: 2px;
        max-width: 16px;
        border-radius: 0;
        background: #333333;
      }
    }
  }
  .list {
    ul {
      li {
        display: flex;
        padding: 10px;
        margin-top: 13px;
        box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.06);
        border-radius: 4px;
        .van-image {
          flex: 80px 0 0;
          width: 80px;
          height: 80px;
        }
        .info {
          flex: 1;
          padding-left: 10px;
          .name {
            height: 36px;
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            line-height: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .price {
            margin-top: 8px;
            height: 18px;
            font-size: 18px;
            font-weight: bold;
            color: #f34a38;
            line-height: 18px;
            .decimal {
              height: 12px;
              font-size: 12px;
              line-height: 12px;
            }
            .company {
              margin-left: 2px;
              font-size: 12px;
              font-weight: 400;
              color: #333333;
              line-height: 12px;
            }
          }
          .salesAndstock {
            margin-top: 8px;
            font-size: 11px;
            font-weight: 400;
            color: #999999;
            line-height: 11px;
            .stock {
              margin-left: 12px;
            }
            .state {
              float: right;
              color: #f34a38;
            }
          }

          .footer {
            margin-top: 20px;
            text-align: right;
            .button {
              margin-left: 8px;
              display: inline-block;
              padding: 8px 22px;
              font-size: 12px;
              font-weight: 400;
              color: #333333;
              line-height: 12px;
              border-radius: 50px;
              border: 1px solid rgba(51, 51, 51, 0.3);
            }
          }
        }
      }
    }
  }
}
</style>